<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col group_1">
				<text class="text_1">步骤一 做好设计（图文并茂）</text>
				<text class="text_2">
					作品集简述，本作品集中描述了关于新手装修全攻略，并且展示作品集流程。作品集简述，本作品集中描述了关于新手装修全攻略，并且展示作品集流程。
				</text>
			</view>
			<view class="flex-col group_2">
				<view class="flex-col group_3">
					<view class="justify-center group_4">
						<view class="flex-col items-center text-wrapper"><text class="text_3">标准版</text></view>
						<!-- <view class="flex-col items-center text-wrapper_1" @click="go('/pages/index/works1')"><text
								class="text_4">进阶版</text></view> -->
						<view class="flex-col items-center text-wrapper_1" @click="goStandard"><text
								class="text_4">进阶版</text></view>
					</view>
					<view class="flex-col section_1">
						<text class="text_5">标准版</text>
						<text class="text_6">标准版中无具体描述，只有基础服务内容，详细内容需要在进阶版中查看。</text>
					</view>
				</view>

				<view class="flex-col section_2" v-if="isLogin">
					<view class="justify-between section_3" @click="goIntroduction">
						<view class="flex-row">
							<image :src="imgUrl+'16557828092551867457.png'" class="image_1" />
							<text class="text_7">{{storageList.strategyTitle}}</text>
						</view>
						<image :src="imgUrl+'16557838861113221762.png'" class="image_2" />
					</view>
				</view>
				<!-- 列表 -->

				<view class="flex-col group_6" v-if="list.length>0">
					<view class="flex-row list-item" v-for="(item,index) in list" :key="index">
						<image :src='item.strategyItleImage' class="image_3 image_4" />
						<view class="flex-col group_7">
							<text class="text_8" @click="article(item.strategyId,item)">{{item.strategyTitle}}</text>
							<view class="justify-between u-col-center">
								<view class="flex-row">
									<!-- 查看数 -->
									<view class="flex-row row">
										<image :src="imgUrl+'16557826815113801323.png'" class="image_5 image_6" />
										<text class="text_9">{{item.strategyLook}}</text>
									</view>
									<!-- 点赞数 -->
									<view class="flex-row row" @click="likeCount(item,index)">
										<image
											:src="item.likeStatus==true ?$IMG_URL+'dzy.png':  $IMG_URL+'16557826815580468287.png'"
											class="image_5 image_7" />
										<text class="text_10">{{item.strategyLike}}</text>
									</view>
									<!-- 收藏数 -->
									<view class="flex-row row" @click="collection(item,index)">
										<image
											:src="item.collectionStatus==true? $IMG_URL+'16557836921572999709.png':$IMG_URL+'16557826699351904721.png' "
											class="image_5 image_8" />
										<text class="text_11">{{item.strategyCollection}}</text>
									</view>
								</view>
								<shop-share v-model="share"></shop-share>
								<image @click="invitation" :src="imgUrl+'16557826815062483643.png'" class="image_5" />
							</view>
						</view>
					</view>


				</view>
				<view class="flex-col" v-else>
					<u-empty style="height: 30vh;" width="250" mode="data" textSize="30rpx"
						icon="http://cdn.uviewui.com/uview/empty/order.png">
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
				isActive: true,
				share: false,
				collections: false,
				imgUrl: this.$IMG_URL,
				list: [],
				strategyId: '', //"攻略ID"
				strategyTitle: 0, //"标题"
				strategyPubTime: 0, //"发布时间"
				strategyItleImage: 0, //"标题图片"
				strategyLike: 0, //"点赞数量"
				strategyLook: 0, //"查看次数"
				strategyStatus: 0, //-- 点赞状态
				collectionCount: 0, //收藏
				storageList: {}, //本地存储
				likeStatus: '',
				collectionStatus: '',
				strategyId: '',
			};
		},
		created() {
			this.articleList(); //列表


		},
		onShow() {
			// 页面加载时取出 返回时触发
			this.storageList = uni.getStorageSync('listArr');
			this.articleList();
			this.likeCount();
			// this.collection();
			console.log('works,onshow出发啦！');
		},
		// onLoad() {
		// 	this.storageList = uni.getStorageSync('listArr');
		// },
		computed: {
			...mapGetters(['isLogin'])
		},
		methods: {
			// 跳转至标准版
			goStandard() {
				uni.redirectTo({
					url: "/pages/index/works1"
				})
			},
			articleList() { //列表  strategyType：付费类型:0免费 1付费

				this.$http('decorationStrategy.list', {
					strategyType: '0'
				}).then(r => {
					if (r.code == 200) {
						this.list = r.data
						this.strategyId = r.data[0].strategyId;
						this.hidden = false; //隐藏最近阅读
					} else {
						this.$u.toast(r.msg);
						this.hidden = true;
					}
				});
			},

			likeCount(item, index) { //装修攻略-文章点赞 
				this.$http('decorationStrategy.likeCount', {
					strategyId: item.strategyId, //攻略ID
					strategyStatus: (item.hasOwnProperty('likeStatus') && item.likeStatus == true) ?
						false : true
				}).then(r => {
					if (r.code == 200) {
						let it = this.list[index];
						it.strategyLike = r.data.likeCount;
						it.likeStatus = r.data.likeStatus;
						this.likeStatus = r.data.likeStatus;
						this.strategyId = this.strategyId;
						// this.$set(this.list, index, it)
					} else {
						this.$u.toast(r.msg);

					}
				});
				// 点赞提示
				if (this.likeStatus) {
					this.$http('decorationStrategy.likeCount', {
						strategyId: item.strategyId, //攻略ID
						strategyStatus: (item.hasOwnProperty('likeStatus') && item.likeStatus == true) ?
							false : true
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {
							this.$u.toast(r.msg);

						}
					});
				} else {
					this.$http('decorationStrategy.likeCount', {
						strategyId: item.strategyId, //攻略ID
						strategyStatus: (item.hasOwnProperty('likeStatus') && item.likeStatus == true) ?
							false : true
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast('点赞请先登录');
						} else {
							this.$u.toast('点赞请先登录');
						}
					});
				}

			},

			collection(item, index) { //装修攻略-文章收藏
				this.$http('decorationStrategy.collection', {
					strategyId: item.strategyId, //攻略ID
					collectionStatus: (item.hasOwnProperty('collectionStatus') && item.collectionStatus ==
						1) ? 0 : 1 //1收藏 0取消
				}).then(r => {
					if (r.code == 200) {
						let it = this.list[index];
						it.strategyCollection = r.data.collectionCount;
						it.collectionStatus = r.data.collectionStatus;
						this.$set(this.list, index, it);
						this.collectionStatus = r.data.collectionStatus;
					} else {
						this.$u.toast(r.msg);

					}
				});
				//收藏提示
				if (this.collectionStatus) {
					this.$http('decorationStrategy.collection', {
						strategyId: item.strategyId, //攻略ID
						collectionStatus: (item.hasOwnProperty('collectionStatus') && item.collectionStatus ==
							1) ? 0 : 1 //1收藏 0取消
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {
							this.$u.toast(r.msg);
						}
					});
				} else {
					this.$http('decorationStrategy.collection', {
						strategyId: item.strategyId, //攻略ID
						collectionStatus: (item.hasOwnProperty('collectionStatus') && item.collectionStatus ==
							1) ? 0 : 1 //1收藏 0取消
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {
							this.$u.toast(r.msg);
						}
					});
				}
			},

			article(item, data) { // 带参跳转文章页4
				uni.navigateTo({
					url: '/pages/introduction/introduction?strategyId=' + item
				})
				// 将点击的一项存本地
				uni.setStorageSync('listArr', data)

			},
			goIntroduction() {
				if (this.storageList == '') {
					return this.$u.toast('暂无最近阅读')
				}
				uni.navigateTo({
					url: `/pages/introduction/introduction?strategyId=${this.storageList.strategyId}`
				})

			},

			refuse() {
				this.show = true;
			},
			invitation() {
				this.share = true;
			}
		},
	};
</script>

<style scoped lang="scss">
	.active {
		transform: rotate(180deg);
	}

	.row {
		width: 130rpx;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.activeClass {
		background-color: #0000ff;
	}

	.errorClass {
		background-color: #ffffff;
	}

	.list-item_1 {
		padding: 33rpx 0 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.image_3 {
		border-radius: 16rpx;
		width: 180rpx;
		height: 180rpx;
	}

	.image_5 {
		width: 32rpx;
		height: 32rpx;
	}

	.text_16 {
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 24rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 31rpx 32rpx 0;
	}

	.group_2 {
		margin-top: 63rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_1 {
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_2 {
		margin-top: 33rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 44rpx;
		text-align: left;
	}

	.group_3 {
		padding: 0 32rpx 40rpx;
	}

	.section_2 {
		padding-bottom: 25rpx;
		background-image: linear-gradient(180deg, #1b55d300 0%, #1b55d300 0%, #1b55d317 100%, #1b55d317 100%);
	}

	.group_6 {
		padding: 0 32rpx;
	}

	.group_4 {
		padding: 32rpx 87rpx 20rpx;
	}

	.section_1 {
		padding: 34rpx 24rpx 42rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826811766179063.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_3 {
		margin: 0 32rpx;
		padding: 17rpx 24rpx 23rpx 32.5rpx;
		background-color: #ffffff;
		box-shadow: 0px -2rpx 12rpx 0px #133e9b14;
		border-radius: 36rpx;
	}

	.list-item {
		padding: 32rpx 0;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text-wrapper {
		padding: 16rpx 0 23rpx;
		background-color: #1d6aff;
		border-radius: 32rpx;
		width: 240rpx;
		height: 64rpx;
	}

	.text-wrapper_1 {
		margin-left: 32rpx;
		padding: 13rpx 0 23rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		width: 240rpx;
		height: 64rpx;
	}

	.text_5 {
		align-self: flex-start;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		margin-top: 25rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
		text-align: left;
	}

	.image_2 {
		margin-top: 6rpx;
		width: 14rpx;
		height: 26rpx;
	}

	.image_4 {
		flex-shrink: 0;
	}

	.group_7 {
		margin-left: 24rpx;
		flex: 1 1 auto;
	}

	.image_14 {
		margin-top: 148rpx;
	}

	.image_15 {
		flex-shrink: 0;
	}

	.group_21 {
		margin-left: 24rpx;
		flex: 1 1 auto;
	}

	.image_19 {
		margin-left: 12rpx;
		margin-top: 148rpx;
		flex-shrink: 0;
	}

	.image_20 {
		flex-shrink: 0;
	}

	.group_27 {
		margin-left: 24rpx;
		flex: 1 1 auto;
	}

	.text_3 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_4 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_1 {
		margin-top: 6.5rpx;
		flex-shrink: 0;
		width: 103rpx;
		height: 24.5rpx;
	}

	.text_7 {
		margin-left: 37.5rpx;
		margin-bottom: 3rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_8 {
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		/* line-height: 33rpx; */
		text-align: left;
		height: 75px;
	}

	.group_8 {
		/* margin-top: 18rpx; */
	}

	.group_15 {
		margin-left: 24rpx;
	}

	.group_22 {
		margin-top: 115rpx;
	}

	.text_21 {
		text-align: left;
	}

	.group_28 {
		margin-top: 82rpx;
	}

	.text_12 {
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_16 {
		margin-top: 115rpx;
	}

	.group_24 {
		margin-left: 47rpx;
	}

	.group_25 {
		margin-left: 48rpx;
	}

	.group_11 {
		position: fixed;
		margin-left: 125rpx;
	}

	.group_12 {
		position: fixed;
		margin-left: 245rpx;
	}

	.group_18 {
		margin-left: 47rpx;
	}

	.group_19 {
		margin-left: 48rpx;
	}

	.image_16 {
		flex-shrink: 0;
	}

	.text_18 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_17 {
		flex-shrink: 0;
	}

	.text_19 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_18 {
		flex-shrink: 0;
	}

	.text_20 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_31 {
		margin-left: 47rpx;
	}

	.group_32 {
		margin-left: 48rpx;
	}

	.image_6 {
		flex-shrink: 0;
	}

	.text_9 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_7 {
		flex-shrink: 0;
	}

	.text_10 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_8 {
		flex-shrink: 0;
	}

	.text_11 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_11 {
		flex-shrink: 0;
	}

	.text_13 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_12 {
		flex-shrink: 0;
	}

	.text_14 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_13 {
		flex-shrink: 0;
	}

	.text_15 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_21 {
		flex-shrink: 0;
	}

	.text_22 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_22 {
		flex-shrink: 0;
	}

	.text_23 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_23 {
		flex-shrink: 0;
	}

	.text_24 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}
</style>
